*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --green-dark: #0a5c3a;
      --green-mid:  #0e7a4e;
      --green-light:#13a065;
      --yellow:     #f5c800;
      --red:        #c0392b;
      --white:      #ffffff;
      --gray-light: #f0f0f0;
      --gray:       #c8c8c8;
      --shadow:     rgba(0,0,0,0.35);
    }

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(ellipse at 60% 40%, var(--green-mid) 0%, var(--green-dark) 70%);
      font-family: 'Barlow Condensed', sans-serif;
      overflow: hidden;
      padding: 1rem;
    }

    /* Decorative pitch lines */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 79px,
          rgba(255,255,255,0.04) 80px
        ),
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 79px,
          rgba(255,255,255,0.04) 80px
        );
      pointer-events: none;
      z-index: 0;
    }

    .card {
      position: relative;
      z-index: 1;
      background: var(--white);
      border-radius: 20px;
      border: 4px solid var(--yellow);
      padding: 2.5rem 2.2rem 2rem;
      width: 100%;
      max-width: 420px;
      text-align: center;
      box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset;
      animation: cardIn 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both;
    }

    @keyframes cardIn {
      from { opacity:0; transform: translateY(40px) scale(0.93); }
      to   { opacity:1; transform: translateY(0)   scale(1); }
    }

    /* --- Logo / Badge --- */
    .logo-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 1.4rem;
      animation: logoIn 0.7s 0.15s cubic-bezier(0.175,0.885,0.32,1.4) both;
    }

    @keyframes logoIn {
      from { opacity:0; transform: scale(0.6) rotate(-8deg); }
      to   { opacity:1; transform: scale(1)   rotate(0deg); }
    }

    .badge {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: linear-gradient(145deg, #1a8c55, #0a5c3a);
      border: 4px solid var(--yellow);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 30px rgba(0,0,0,0.4);
      overflow: hidden;
    }

    .badge svg {
      width: 80px;
      height: 80px;
    }

    /* --- Title --- */
    .title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.6rem, 8vw, 3.2rem);
      letter-spacing: 0.06em;
      line-height: 1;
      color: var(--red);
      animation: fadeUp 0.5s 0.3s ease both;
    }

    .subtitle {
      font-size: 0.82rem;
      letter-spacing: 0.22em;
      color: #888;
      text-transform: uppercase;
      margin-top: 0.25rem;
      margin-bottom: 1.8rem;
      animation: fadeUp 0.5s 0.4s ease both;
    }

    @keyframes fadeUp {
      from { opacity:0; transform: translateY(14px); }
      to   { opacity:1; transform: translateY(0); }
    }

    /* --- PIN Input --- */
    .pin-wrap {
      position: relative;
      animation: fadeUp 0.5s 0.5s ease both;
    }

    #pin-input {
      width: 100%;
      padding: 1rem 1.2rem;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.9rem;
      letter-spacing: 0.5em;
      text-align: center;
      border: 2px solid var(--gray);
      border-radius: 10px;
      background: var(--gray-light);
      color: #333;
      outline: none;
      transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
    }

    #pin-input::placeholder {
      color: var(--gray);
      letter-spacing: 0.25em;
      font-size: 1.4rem;
    }

    #pin-input:focus {
      border-color: var(--green-light);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(19,160,101,0.15);
    }

    #pin-input.error {
      border-color: var(--red);
      box-shadow: 0 0 0 4px rgba(192,57,43,0.15);
      animation: shake 0.4s ease;
    }

    @keyframes shake {
      0%,100% { transform: translateX(0); }
      20%      { transform: translateX(-8px); }
      40%      { transform: translateX(8px); }
      60%      { transform: translateX(-5px); }
      80%      { transform: translateX(5px); }
    }

    /* --- Button --- */
    .btn-enter {
      margin-top: 1rem;
      width: 100%;
      padding: 1rem;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.3rem;
      letter-spacing: 0.14em;
      color: var(--white);
      background: linear-gradient(135deg, #3a9e72, #0e7a4e);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(14,122,78,0.4);
      transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
      animation: fadeUp 0.5s 0.6s ease both;
      position: relative;
      overflow: hidden;
    }

    .btn-enter::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
      pointer-events: none;
    }

    .btn-enter:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(14,122,78,0.55);
    }

    .btn-enter:active {
      transform: translateY(1px);
      box-shadow: 0 3px 10px rgba(14,122,78,0.4);
    }

    .btn-enter.loading {
      pointer-events: none;
      background: linear-gradient(135deg, #5ab893, #2a9e6e);
    }

    /* Spinner inside btn */
    .spinner {
      display: none;
      width: 18px; height: 18px;
      border: 3px solid rgba(255,255,255,0.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin: 0 auto;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .btn-text { transition: opacity 0.2s; }

    /* --- Sync link --- */
    .sync-row {
      margin-top: 1.4rem;
      animation: fadeUp 0.5s 0.7s ease both;
    }

    .btn-sync {
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      color: #777;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-transform: uppercase;
      transition: color 0.2s;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .btn-sync:hover { color: var(--green-light); }

    .btn-sync svg {
      width: 14px; height: 14px;
      transition: transform 0.4s;
    }

    .btn-sync.spinning svg { animation: spin 0.8s linear infinite; }

    /* --- Error message --- */
    .error-msg {
      display: none;
      margin-top: 0.55rem;
      font-size: 0.82rem;
      color: var(--red);
      letter-spacing: 0.06em;
      font-weight: 600;
    }